<template>
  <view class="search-container">
    <view class="search-box">

      <input class="inp"
             v-model="keyword"
             placeholder="点击搜索"
             :style="{'height':`${btnBarHeight}px`}"
             @blur="getProduct">

    </view>
    <view class="tools">
      <view class="item "
            :class="toolsIndex=='cailiao' || caiLiaoIndex >0 ?'active':''"
            @click="handleTools('cailiao')">
        <view class="item-text">{{caiLiaoIndex>0?caiLiaoArray[caiLiaoIndex].title:'材料'}}</view>
        <image :class="toolsIndex=='cailiao'?'rotate-180':''"
               src="http://www.huangjinya.top/xcx/search/sanjiao.png"></image>
      </view>
      <view class="item"
            :class="toolsIndex=='fengge' || fengGeIndex >0?'active':''"
            @click="handleTools('fengge')">
        <view class="item-text">{{fengGeIndex>0?fengGeArray[fengGeIndex].title:'风格'}}</view>
        <image :class="toolsIndex=='fengge'?'rotate-180':''"
               src="http://www.huangjinya.top/xcx/search/sanjiao.png"></image>
      </view>
      <view class="item"
            :class="toolsIndex=='yuansu'  || yuanSuIndex >0?'active':''"
            @click="handleTools('yuansu')">
        <view class="item-text">{{yuanSuIndex>0?yuanSuArray[yuanSuIndex].title:'元素'}}</view>
        <image :class="toolsIndex=='yuansu'?'rotate-180':''"
               src="http://www.huangjinya.top/xcx/search/sanjiao.png"></image>
      </view>
      <view class="item"
            :class="toolsIndex=='jiage'  || minPrice != '' || maxPrice != ''?'active':''"
            @click="handleTools('jiage')">
        <view class="item-text">价格</view>
        <image :class="toolsIndex=='jiage'?'rotate-180':''"
               src="http://www.huangjinya.top/xcx/search/sanjiao.png"></image>
      </view>
    </view>

    <transition name="plus-icon">
      <scroll-view class="tools-model"
                   scroll-y
                   v-if="toolsIndex=='cailiao'">
        <view class="item "
              :class="caiLiaoIndex==k?'active':''"
              v-for="(v,k) in caiLiaoArray"
              @click="clickItem('cailiao',k)">
          <view>{{v.title}}</view>
          <view v-if="caiLiaoIndex==k">
            <uni-icons type="checkmarkempty"
                       size="18"
                       color="#006400"></uni-icons>
          </view>
        </view>
      </scroll-view>
    </transition>

    <scroll-view class="tools-model"
                 scroll-y
                 v-if="toolsIndex=='fengge'">
      <view class="item "
            :class="fengGeIndex==k?'active':''"
            v-for="(v,k) in fengGeArray"
            @click="clickItem('fengge',k)">
        <view>{{v.title}}</view>
        <view v-if="fengGeIndex==k">
          <uni-icons type="checkmarkempty"
                     size="18"
                     color="#006400"></uni-icons>
        </view>
      </view>
    </scroll-view>

    <scroll-view class="tools-model"
                 scroll-y
                 v-if="toolsIndex=='yuansu'">
      <view class="item "
            :class="yuanSuIndex==k?'active':''"
            v-for="(v,k) in yuanSuArray"
            @click="clickItem('yuansu',k)">
        <view>{{v.title}}</view>
        <view v-if="yuanSuIndex==k">
          <uni-icons type="checkmarkempty"
                     size="18"
                     color="#006400"></uni-icons>
        </view>
      </view>
    </scroll-view>

    <view class="tools-model"
          v-if="toolsIndex=='jiage'"
          style="height:auto">
      <view class="item">
        <view>
          <input class="inp"
                 name="input"
                 v-model="minPrice"
                 placeholder="最低售价" />
        </view>
        <view style="padding:0 30upx">
          -
        </view>
        <view>
          <input class="inp"
                 name="input"
                 v-model="maxPrice"
                 placeholder="最高售价" />
        </view>
      </view>
      <view class="footer">
        <view class="left">
          <uni-icons type="trash"
                     size="30"></uni-icons>
        </view>
        <view class="right">
          <view class="button"
                @click="getProduct">确定</view>
        </view>
      </view>
    </view>
    <!-- <xw-empty :isShow="load.status"
              :text="load.text"
              textColor="#777777"></xw-empty> -->
    <scroll-view class="main-box"
                 scroll-y
                 :style="{'top':`${headerHeight}px`,'height':`${mainHeight}`}">
      <view class="main">
        <view class="item"
              v-for="v in list"
              @click="read(v.id)">
          <image mode="widthFix"
                 :src="v.head"></image>
          <view class="content">
            <view class="title">{{v.title}}</view>
            <!-- <view class="tag">
              <uni-tag :mark="true"
                       :text="tag[v1].title"
                       :type="tag[v1].type"
                       size="mini"
                       style="margin-right:8upx"
                       v-for="v1 in v.tag" />
            </view> -->
            <view class="footer">
              <view class="price">
                <text style="font-size:24upx">￥</text>
                <text style="margin-left:-4upx">{{v.price}}</text>
              </view>
              <view class="cert">1000+已售</view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>
<script>
export default {
  data () {
    return {
      statusBarHeight: 0,
      btnBarHeight: 0,
      headerHeight: 0, //状态栏+标题高度
      mainHeight: 0, //主体高度
      searchBoxWidth: 0,
      caiLiaoArray: [],
      fengGeArray: [],
      yuanSuArray: [],
      caiLiaoIndex: 0,
      fengGeIndex: 0,
      yuanSuIndex: 0,
      toolsIndex: 0,
      minPrice: '',
      maxPrice: '',
      keyword: '',
      list: [],
      load: {
        status: true,
        text: "搜索暂无结果"
      },
    }
  },
  onReady () {
    let MenuButtontop = wx.getMenuButtonBoundingClientRect().top //获取右上角胶囊上边高度
    let MenuButtonwidth = wx.getMenuButtonBoundingClientRect().width //获取右上角胶囊宽度
    this.statusBarHeight = MenuButtontop
    let MenuButtonbottom = wx.getMenuButtonBoundingClientRect().bottom //获取右上角下边胶囊高度
    this.btnBarHeight = MenuButtonbottom - MenuButtontop //胶囊高度，让搜索框高度和胶囊一样高
    this.headerHeight = MenuButtonbottom //整个头部高度
    this.searchBoxWidth = 'calc(100% - ' + MenuButtonwidth + 'px)';
    this.mainHeight = 'calc(100vh -  ' + (MenuButtonbottom) + 'px)';
  },
  async onLoad () {

    this.getCaiLiao()
    this.getFengGe()
    this.getYuanSu()

  },
  methods: {
    clickItem (type, index) {
      this.toolsIndex = ''
      switch (type) {
        case 'cailiao':
          this.caiLiaoIndex = index
          break;
        case 'yuansu':
          this.yuanSuIndex = index
          break;
        case 'fengge':
          this.fengGeIndex = index
          break;
        default:
          break;
      }
      this.getProduct()
    },
    handleTools (e) {
      if (this.toolsIndex == e) {
        this.toolsIndex = ''
      } else {
        this.toolsIndex = e
      }
    },
    goBack () {
      uni.navigateBack({
        delta: 2
      })
    },

    bindPickerChange: function (e) {
      this.codeIndex = e.detail.value
    },
    getCaiLiao () {
      this.list = [];
      this.$myRequest('code/material', {}).then((res) => {
        if (res.code == 1000) {
          let arr = [{
            id: 0,
            title: "不限"
          }]
          res.data.data.forEach(element => {
            arr.push({
              id: element.id,
              title: element.title
            })
          });
          this.caiLiaoArray = arr

          if (this.$Route.query.caiLiaoIndex) {
            this.caiLiaoIndex = this.$Route.query.caiLiaoIndex
            this.getProduct()
          }
        }
      })
    },

    getFengGe () {
      this.list = [];
      this.$myRequest('code/mode', {}).then((res) => {
        if (res.code == 1000) {
          let arr = [{
            id: 0,
            title: "不限"
          }]
          res.data.data.forEach(element => {
            arr.push({
              id: element.id,
              title: element.title
            })
          });
          this.fengGeArray = arr
        }
      })
    },

    getYuanSu () {
      this.list = [];
      this.$myRequest('code/popular', {}).then((res) => {
        if (res.code == 1000) {
          let arr = [{
            id: 0,
            title: "不限"
          }]
          res.data.data.forEach(element => {
            arr.push({
              id: element.id,
              title: element.title
            })
          });
          this.yuanSuArray = arr
        }
      })
    },
    getProduct () {
      this.toolsIndex = ''
      this.list = [];
      this.$myRequest('product/list', {
        material: this.caiLiaoIndex > 0 ? this.caiLiaoArray[this.caiLiaoIndex].id : 0,
        mode: this.fengGeIndex > 0 ? this.fengGeArray[this.fengGeIndex].id : 0,
        popular: this.yuanSuIndex > 0 ? this.yuanSuArray[this.yuanSuIndex].id : 0,
        min_price: this.minPrice,
        max_price: this.maxPrice,
        keyword: this.keyword
      }).then((res) => {
        if (res.code == 1000) {
          this.list = res.data.data
          if (res.data.data == 0) {
            this.load.status = true
          } else {
            this.load.status = false
          }
        }
      })
    }
  }
}
</script>

<style lang="scss">
.search-container {
  background-color: #fff;
  .search-box {
    padding-top: 20upx;
    margin-bottom: 20upx;
    width: 100%;
    background-color: #fff;
    z-index: 999;
    padding-left: 20upx;
    padding-right: 20upx;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    width: 100%;

    .inp {
      width: 100%;
      border-radius: 20upx;
      border: 1px solid $uni-border-color;
      padding: 10upx 40upx;
    }
  }

  .tools {
    display: flex;
    height: 40px;
    align-items: center;
    color: #666;
    background-color: #fff;
    z-index: 99;
    padding-bottom: 10upx;
    border-bottom: 1px solid #f5f5f5;

    .item {
      display: flex;
      align-items: center;
      justify-content: center;
      /* 水平居中 */
      flex: 1;

      .item-text {
        margin-right: 10upx;
      }
      .rotate-180 {
        transform: rotate(180deg);
      }
      image {
        width: 14upx;
        height: 14upx;
      }
    }

    .active {
      color: $uni-color-green;
    }
  }

  .tools-model {
    position: absolute;
    top: 200upx;
    width: 100%;
    height: 400upx;
    border-bottom-right-radius: 20upx;
    border-bottom-left-radius: 20upx;
    background-color: #fff;
    z-index: 999;

    .item {
      position: relative;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20upx 40upx;
      margin: 20upx;
      border-radius: 10upx;
      z-index: 999;

      .inp {
        border: 1px solid #f5f5f5;
        padding: 10upx 30upx;
      }
    }

    .footer {
      display: flex;
      align-items: center;
      width: 100%;
      padding: 0 40upx 30upx;
      box-sizing: border-box;

      .left {
        padding-right: 40upx;
      }

      .right {
        flex: 1;

        .button {
          font-size: 30upx;
          line-height: 40upx;
          padding: 20upx 40upx;
          background-color: $uni-color-team;
          color: $uni-color-green;
          text-align: center;
          border-radius: 10upx;
        }
      }
    }

    .active {
      background-color: $uni-color-team;
      color: $uni-color-green;
    }
  }

  .main-box {
    background-color: #f5f5f5;
    padding: 10upx;
    box-sizing: border-box;
    width: 100%;
    border-radius: 10upx;

    .main {
      padding-top: 20upx;
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      box-sizing: border-box;
      justify-content: flex-start; // 替代原先的space-between布局方式

      .item {
        flex: 1;
        background-color: #fff;
        margin: 10upx; // 间隙为5px

        border-radius: 10upx;
        width: calc(
          (100% - 20px) / 2
        ); // 这里的10px = (分布个数2-1)*间隙5px, 可以根据实际的分布个数和间隙区调整
        min-width: calc(
          (100% - 20px) / 2
        ); // 加入这两个后每个item的宽度就生效了
        max-width: calc(
          (100% - 20px) / 2
        ); // 加入这两个后每个item的宽度就生效了

        &:nth-child(2n) {
          // 去除第2n个的margin-right
          margin-right: 0;
        }

        image {
          width: 100%;
          border-radius: 10upx 10upx 0 0;
        }

        .content {
          padding: 20upx;

          .title {
            margin-bottom: 10upx;
          }

          .tag {
            margin-bottom: 10upx;
          }

          .code {
            color: #999;
            font-size: 26upx;
            margin-bottom: 10upx;
          }

          .footer {
            display: flex;
            color: $uni-color-error;
            align-items: center;
            justify-content: space-between;

            .price {
              font-weight: 500;
              font-size: 18px;
            }

            .cert {
              color: #999;
              font-size: 12px;
            }
          }
        }
      }
    }
  }
}
</style>
